/* eslint-disable no-unused-vars */
import React, { useEffect, useState, useContext, useRef } from 'react';
// import { Form, Input, Button, message, Layout, Alert } from 'antd';
import AceEditor from 'react-ace';
import 'ace-builds/webpack-resolver'; // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/javascript';
import 'ace-builds/src-min-noconflict/ext-searchbox';
import 'ace-builds/src-min-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/theme-tomorrow';

/**
 * js 在线编码器
 * @param {*} props
 * @returns
 */

const JsLiveCode = (props) => {
  const { code, onChange, id } = props;
  // 增加需要自定义的代码提示
  const completers = [
    {
      name: 'api.form',
      value: 'api.form.',
      score: 100,
      meta: 'api的表单请求对象json,支持application/json,不支持http form提交。',
    },
    {
      name: 'api.cache',
      value: 'api.cache(time:Int).XXX',
      score: 100,
      meta: 'api缓存结果,提升性能,支持httpGet,httpPost,querySql等结果集缓存。',
    },
    {
      name: 'api.getDesign',
      value: 'api.getDesign(title:String)',
      score: 100,
      meta: 'api根据title获取表单值,返回Object',
    },
    {
      name: 'api.setDesign',
      value: 'api.setDesign(title:String,value:Object)',
      score: 100,
      meta: 'api根据title设置表单值',
    },
    {
      name: 'api.httpGet',
      value: 'api.httpGet(url:String)',
      score: 100,
      meta: 'api的http get请求支持,返回String',
    },
    {
      name: 'api.httpPost',
      value: 'api.httpPost(url:String,json:JSON)',
      score: 100,
      meta: 'api的http post json请求支持,返回String',
    },
    {
      name: 'api.querySql',
      value: 'api.querySql(sql:String,ps:Object[])',
      score: 100,
      meta: 'api的sql查询支持,返回Object',
    },
    {
      name: 'api.log',
      value: 'api.log(log:Object)',
      score: 100,
      meta: 'api的日志打印,通过浏览器控制台可查看。',
    },
    {
      name: 'api.getTable',
      value: 'api.getTable(title:String)',
      score: 100,
      meta: 'api获取表格操作。',
    },
    {
      name: 'api.getTable.querySql',
      value: 'api.getTable(title:String).querySql(sql:String,ps:Object[])',
      score: 100,
      meta: 'api获取表格后sql查询操作。',
    },
  ];

  const complete = (editor) => {
    editor.completers.push({
      getCompletions(editors, session, pos, prefix, callback) {
        callback(null, completers);
      },
    });
  };

  return (
    <>
      <AceEditor
        placeholder="此处输入es5语法js"
        mode="javascript"
        theme="tomorrow"
        name={id}
        // onLoad={this.onLoad}
        onChange={(event) => {
          onChange(event);
        }}
        fontSize={14}
        showPrintMargin={false}
        showGutter
        highlightActiveLine
        value={code}
        setOptions={{
          useWorker: false,
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          showLineNumbers: true,
          tabSize: 2,
          minLines: 15,
          maxLines: 15,
        }}
        width="100%"
        onLoad={complete}
      />
    </>
  );
};

export default JsLiveCode;
